@import '../../variable.less';
page{
  background:#fff;
}
.container{
  width:750rpx;
  .mode{
    width:690rpx; 
    padding:40rpx 30rpx;
    margin:0 auto;
    background-color: #fff;
    border-bottom:20rpx solid #F6F7F9;
    overflow: hidden;
    .mode-active-title{
      width:690rpx;
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 42rpx;
      color: #333333;
      .active-title-right{
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 42rpx;
        color: #999999;
        overflow: hidden;
        position: relative;
        padding-right:33rpx;
        .icon{
          position: absolute;
          top:9rpx;
          right:0;
          width:12rpx;
          height:24rpx;

        }
      }
    }
    .mode-title{
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 42rpx;
      color: #333333;
    }
    .mode-content{
      overflow-x: scroll;
    }
  }
  .mode1{
    width:750rpx;
    padding:0;
    height:704rpx;
    border-bottom:20rpx solid #F6F7F9;
    .img{
      width:750rpx;
      height:500rpx;
    }
    .mode1-info{
      padding:30rpx;
      .mode1-info-tit{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #333333;
      }
      .mode1-info-labels{
        padding-top:10rpx;
        display: flex;
        flex-wrap: wrap;
        .label{
          padding:2rpx 5rpx;
          margin-right:10rpx;
          margin-top:10rpx;
          background: #ECFFFD;
          border: 1rpx solid @color;
          border-radius: 5rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 28rpx;
          color: @color;
         

        }

      }
    }
  }
  .mode2{
    .mode2-info{
      width:672rpx;
      .mode2-info-item{
        width:672rpx;
        padding-bottom:20rpx;
        display: flex;
        justify-content: space-between;
        .mode-left{
          display: flex;
          justify-content: start;
          .left-key{
            display: inline-block;
            width:84rpx;
            padding-right:30rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 40rpx;
            color: #333333;
          }
          .left-val{
            width:500rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 40rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;

          }
        }
        .icon{

        }
      }

    }
    .mode2-img{
      margin-top:10rpx;
      margin-bottom:30rpx;
      width:690rpx;
      .img{
        width:690rpx;
        height:270rpx;
      }
    }
    .mode-active-title{
      margin-top:20rpx;
    }
  }
  .mode4{
    .mode4-content{
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      color: #999999;
      white-space: pre-wrap;
    }

  }
  .mode5{
    padding-bottom:120rpx;
    .mode5-content{
      padding-top:30rpx;
      .item{
        height:120rpx;
        overflow: hidden;
        padding:0 28rpx;
        
        .item-date{
          margin-top:14rpx;
          margin-bottom:23rpx;
          width: 170rpx;
          height: 40rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 40rpx;
          color: #FFFFFF;
          text-align: center;
        }
        .item-log{
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 40rpx;
          color: #6D7278;
        }
      }
      .type-right{
        margin-left:341rpx;
        width:341rpx;      
      }
      .type-left{
        width:341rpx;
        padding:0;
        .item-date{
          margin-left:157rpx;
        }
        .item-log{
          margin-left:58rpx;
        }

      }
    }
  }

  .bottomBar{
    position: fixed;
    bottom:0;
    left:0;
    width: 750rpx;
    height: 110rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -6rpx 12rpx rgba(0, 0, 0, 0.06);
    display: flex;
    .collectionBtn{
      width: 396rpx;
      height: 110rpx;
      background: #0EBFA8;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 110rpx;
      color: #FFFFFF;
      text-align: center;
    }
    .left{
      width:396rpx;
      display: flex;
      justify-content: space-around;
      .item{
        width:48rpx;
        position: relative;
        .icon{
          display: block;
          width:30rpx;
          height:30rpx;
          margin:20rpx 9rpx 6rpx;
        }
        .item-name{
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 33rpx;
          color: #333333;
        }
        .shareBtn{
          position: absolute;
          top:20rpx;
          left:0;
          margin:0 ;
          padding:0;
          padding-top:36rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 40rpx;
          color: #333333;
          border:0;
        }

      }
    }
  }
  

}